<template>
    <div class="workProcess-index yuan-container">
        <a-card title="工艺工序">
            <a-tabs style="margin-top: 20px" type="card" :default-active-key="tabKey" @change="changeTab">
                <a-tab-pane v-for="item in tabsData" :key="item" :tab="item">
                    <div class="filter-panel">
                        <a-input-search class="filter-list" allowClear style="width: 200px;color: #05b089" v-model="keywords"
                                        placeholder="工艺名称" @search="resetList" />
                        <div class="filter-list" style="float: right;" v-if="$utilCheckPermission(['craftProcessAdd'])">
                            <a-button type="primary" @click="add">新增</a-button>
                            <a-button type="primary" @click="downloadTpl"
                                      v-if="$utilCheckPermission(['craftProcessDownload'])">下载导入模板</a-button>
                            <a-upload name="file" :multiple="false" :beforeUpload="beforeUpload" :showUploadList="false"
                                      v-if="$utilCheckPermission(['craftProcessImport'])">
                                <a-button type="primary" style="margin-left: 5px;">导入</a-button>
                            </a-upload>
                        </div>
                    </div>
                    <div class="table">
                        <a-table bordered :rowKey="getRowKey" :data-source="pageList" :columns="columns" :pagination="pagination"
                                 :loading="loading">
                        </a-table>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </a-card>
        <Add :visible="addVisible" @closeModal="() => addVisible = false" :infoId="infoId" @resetList="getList" />
        <Detail :visible="detailVisible" @closeModal="() => detailVisible = false" :infoId="infoId" />
        <PreviewImageVue :imgList="imageUrls" @close="previewVisible=false" :previewVisible="previewVisible" />

    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { h } from "vue";
import nextApi, { ProcessListRes } from "@/api/nextApi";
import Add from "./components/Add.vue";
import Detail from "./components/Detail.vue";
import PreviewImageVue from "@/components/previewImage.vue";
import {downLoadFile} from "@/utils";
@Component({
    name: "workProcessIndex",
    components: { Add, Detail, PreviewImageVue },
})
export default class extends Vue {
    previewVisible = false;
    imageUrls = ["/img/test.jpg", "/img/test1.png", "../../../assets/images/logo.png"];
    keywords = "";
    loading = false;
    pagination = {
        pageSize: 10,
        current: 1,
        total: 0,
        showTotal: (total: number) => `共${total}条`,
        onChange: this.pageChange,
    };
    pageList: ProcessListRes[] = [];
    columns = [
        {
            title: "序号",
            dataIndex: "index",
            key: "index",
            align: "center",
            customRender: (text: string, record: any, index: number) => `${index + 1}`,
        },
        {
            align: "center",
            dataIndex: "craftName",
            key: "craftName",
            title: "工艺名称",
        },
        {
            align: "center",
            dataIndex: "varietyName",
            key: "varietyName",
            title: "品名",
        },
        {
            align: "center",
            dataIndex: "createTime",
            key: "createTime",
            title: "添加时间",
        },
        {
            align: "center",
            dataIndex: "executiveStandard",
            key: "executiveStandard",
            title: "执行标准",
            customRender: (text: string, record: ProcessListRes, index: number) => {
                if (record.executiveStandard && this.$utilCheckPermission(["craftProcessLook"])) {
                    return h("div", [
                        h(
                            "a-button",
                            {
                                style: { marginRight: "5px" },
                                props: { type: "primary", size: "small" },
                                on: { click: () => this.showStandardImg(record) },
                            },
                            "查看"
                        ),
                    ]);
                } else {
                    return "--";
                }
            },
        },
        {
            align: "center",
            dataIndex: "state",
            key: "state",
            title: "状态",
            customRender: (text: string, record: ProcessListRes, index: number) => {
                const stateBox = h(
                    "div",
                    { class: record.state === 0 ? "c-success" : "c-danger" },
                    record.state === 0 ? "启用" : "禁用"
                );
                return stateBox;
            },
        },
        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 260,
            customRender: (text: string, record: ProcessListRes, index: number) => {
                const statusDom = h(
                    "a-popconfirm",
                    {
                        props: {
                            title: record.state === 0 ? "确定要禁用吗？" : "确定要启用吗？",
                            okText: "确定",
                            cancelText: "取消",
                        },
                        on: { confirm: () => this.clickDisable(record) },
                    },
                    [
                        h(
                            "a-button",
                            {
                                props: {
                                    icon: record.state === 0 ? "delete" : "tool",
                                    type: record.state === 0 ? "danger" : "primary",
                                    size: "small",
                                },
                            },
                            record.state === 0 ? "禁用" : "启用"
                        ),
                    ]
                );
                const editBtn = h(
                    "a-button",
                    {
                        style: { marginRight: "5px" },
                        props: { icon: "edit", type: "primary", size: "small" },
                        on: { click: () => this.editDetail(record) },
                    },
                    "编辑"
                );

                const btn: any[] = [];
                if (this.$utilCheckPermission(["craftProcessCompile"])) btn.push(editBtn);
                if (this.$utilCheckPermission(["craftProcessForbidden"])) btn.push(statusDom);

                return h("div", btn);
            },
        },
    ];
    tabsData = ['中药饮片(半成品)','直服饮片(半成品)','单方饮片(半成品)']
    tabKey = '中药饮片(半成品)'
    changeTab(key){
        this.tabKey = key
        this.getList()
    }
    getRowKey(item: any) {
        return item.id;
    }

    async getList() {
        this.pageList = [];
        try {
            this.loading = true;
            const res = await nextApi.getProcessList({
                pageSize: this.pagination.pageSize,
                pageNum: this.pagination.current,
                varietyName: this.keywords,
                productType:this.tabKey
            });
            this.pagination.total = res.data?.total || 0;
            this.pageList = res.data?.rows || [];
        } finally {
            this.loading = false;
        }
    }
    beforeUpload(file: any) {
        let formData = new FormData();
        formData.append("file", file);
        formData.append("type", this.tabKey);
        this.uploadAccount(formData);
        return false;
    }
    async uploadAccount(formData: any) {
        this.loading = true;
        try {
            const res = await nextApi.importProcessTemplate(formData);
            this.$message.success(res.msg);
            this.resetList();
        } finally {
            this.loading = false;
        }
    }
    downloadTpl() {
        this.loading = true;
        nextApi.downloadProcessTemplate({ type: this.tabKey }, (res: any) => {
            const blob = new Blob([res.data], {
                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
                // type: "application/vnd.ms-excel",
            });
            downLoadFile(blob, this.tabKey + "_导入模板");
            this.loading = false;
        });
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }

    detailVisible = false;
    showDetail(item: ProcessListRes) {
        this.detailVisible = true;
    }

    addVisible = false;
    infoId = "";
    editDetail(item: ProcessListRes) {
        this.infoId = item.id;
        this.addVisible = true;
    }
    add() {
        this.infoId = "";
        this.addVisible = true;
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;

        this.getList();
    }
    async clickDisable(item: ProcessListRes) {
        try {
            this.loading = true;
            await nextApi.editProcess({
                id: item.id,
                state: item.state === 1 ? 0 : 1,
            });
        } finally {
            this.loading = false;
        }
        this.getList();
    }
    async mounted() {
        this.getList();
    }
    showStandardImg(item: ProcessListRes) {
        this.imageUrls = item.executiveStandard.split(";");
        this.previewVisible = true;
    }
}
</script>
<style lang="scss">
.workProcess-index {
    padding: 20px;
}
</style>
